<template>
    <div class="course__item">
        <div class="course__item-inner">
            <div class="course__thumb">
                <!-- 以前的 -->
                <!-- <img :src="courseDetails.thumbnail" alt="course Images"> -->
                <!-- 新的 -->
                 <block v-if="courseDetails.thumbnail">
                    <img :src="courseDetails.thumbnail" alt="course Images">
                 </block>
                 <block v-else>
                    <img :src="courseDetails.picture.indexOf('http') == -1 ? 'http://localhost/dev-api'+ courseDetails.picture : courseDetails.picture" alt="course Images">
                 </block>
                <!-- <div>{{ courseDetails }}</div> -->
                <a href="javascript:void(0);" class="course__btn course__btn--save"><i
                        class="fa-regular fa-bookmark"></i></a>
            </div>
            <div class="course__content">
                <div class="course__content-top">
                    <!-- 以前的 -->
                     <block v-if="courseDetails.category">
                        <span class="course__meta-tag" :class="`course__meta-tag--cat${Math.floor(Math.random() * (4 - 1) + 1)}`">{{ courseDetails.category }}</span>
                     </block>
                     <block v-else>
                        <span class="course__meta-tag" :class="`course__meta-tag--cat${Math.floor(Math.random() * (4 - 1) + 1)}`">{{ courseDetails.tags }}</span>
                     </block>
                    <!-- <span class="course__meta-tag" :class="`course__meta-tag--cat${Math.floor(Math.random() * (4 - 1) + 1)}`">{{ courseDetails.category }}</span> -->
                            <!-- 新的 -->
            <!--         <div class="course__focus-inner">
                        <span>{{ courseDetails.rating }}</span>
                        <img src="/images/course/star.png" alt="review-star">
                        <span>({{ courseDetails.ratingCount }})</span>
                    </div> -->
                </div>
                <!-- 以前的 -->
                <!-- <h6> <a href="/course-details"> {{ courseDetails.title }}</a> </h6> -->
                 <!-- 新的 -->
                  <block v-if="courseDetails.title">
                    <h6> <a href="/course-details"> {{ courseDetails.title }}</a> </h6>
                  </block>
                  <block v-else>
                        <h6> <a href="/course-details"> {{ courseDetails.description }}</a> </h6>
                  </block>
<!--                 <div class="course__content-bottom">
                    <nuxt-link to="/mentor-details"><img :src="courseDetails.avatar" alt="avatar">
                        {{ courseDetails.avatarName }}</nuxt-link>
                    <div class="course-price">
                        <del>${{ courseDetails.price }}</del> <span> ${{ courseDetails.discountedPrice }}</span>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        courseDetails: {
            type: Object,
            default: () => { },
        },
    },

}
</script>